<template>
  <el-col v-loading="loading.state">
    <el-col class="el-alert el-alert--info" style="margin-bottom:20px">
      <el-col class="el-alert__content">
        <span class="el-alert__title">当前已选择{{multipleSelection.length}}个案件，已分配案件{{allocated}}个，还剩余{{multipleSelection.length-allocated}}个案件待分配。</span>
      </el-col>
    </el-col>
    <el-table :data="cupor" height="400" min-width="595">
      <el-table-column type="index" label="序号" align="center" width="65"></el-table-column>
      <el-table-column prop="userName" label="用户名" align="center" min-width="100"></el-table-column>
      <el-table-column prop="realName" label="催收员" align="center" min-width="100"></el-table-column>
      <el-table-column prop="caseNumber" label="当前持有案件数" align="center" min-width="120"></el-table-column>
      <el-table-column label="确认分配案件数" align="center" min-width="150">
        <template scope="scope">
          <el-input :min="0" size="small" type="number" :maxlength="2" class="batch" v-model="scope.row.distributionCount" :max="inputMax(scope)" @focus="inputFocus(scope)" @blur="batchInputChange(scope)">
          </el-input>
        </template>
      </el-table-column>
    </el-table>
    <el-col class="text-center btns">
      <el-button @click="userPreStep">上一步</el-button>
      <el-button @click="userConfirm">确认分配</el-button>
      <el-button @click="close">取消</el-button>
    </el-col>
  </el-col>
</template>
<script>
  import net from '@/util/net'
  import servers from '@/config/servers'

  export default {
    name: 'user-reallocate',
    data() {
      return {
        loading: {
          state: false
        },
        // 服务接口列表
        server: {
          getAccReceivePoolByUserId: servers.CaseManage.get_acc_receive_pool_by_userId, // 获取催收员信息
          distributeCeaseInfoAgin: servers.CaseManage.distribute_cease_info_agin // 案件分配确认
        },
        // 用户
        cupor: [],
        allocated: 0,
        multipleSelection: []
      }
    },
    methods: {
      /**
       * 刷新
       */
      refresh(multipleSelection) {
        this.cupor = []
        this.updateAllocated()
        this.multipleSelection = multipleSelection
        let userIds = this.$store.state.caseManage.case_allot_user.map(v => {
          return v.userId
        })
        net.send({
          server: this.server.getAccReceivePoolByUserId,
          data: {
            userIds: userIds
          }
        }).then(data => {
          if (data) {
            data = data.map(x => {
              x.distributionCount = 0
              return x
            })
            this.cupor = data
          } else {
            this.cupor = []
          }
        })
      },
      /**
       * 用户分配确认
       */
      userConfirm() {
        let caseIdList = this.multipleSelection.map(v => {
          return v.cupoId
        })
        let caseNumList = this.cupor.map(v => {
          return v.distributionCount
        })
        let userNameList = this.cupor.map(v => {
          return v.userName
        })
        net.send({
          server: this.server.distributeCeaseInfoAgin,
          data: {
            caseIdList: caseIdList,
            caseNumList: caseNumList,
            userNameList: userNameList,
            disType: 1
          },
          loading: this.loading
        }).then((data) => {
          this.close()
          this.$emit('refresh')
          this.$message({
            type: 'info',
            message: '分配成功！'
          })
        }, err => {
          this.$message({
            type: 'info',
            message: err.reason
          })
        })
      },
      /**
       * 输入框最大值
       */
      inputMax(scope) {
        let max = ((this.multipleSelection.length - this.allocated) > 0) ? (this.multipleSelection.length - this.allocated) : 0
        return max
      },
      /**
       * 更新allocated
       */
      updateAllocated() {
        let sum = 0
        for (let v = 0; v < this.cupor.length; v++) {
          sum = sum + (isNaN(parseInt(this.cupor[v].distributionCount)) ? 0 : parseInt(this.cupor[v].distributionCount))
        }
        this.allocated = sum
      },
      // 批量分配输入获取焦点
      inputFocus(scope) {
        this.cupor[scope.$index].distributionCount = 0
        this.updateAllocated()
      },
      /**
       * 输入框输入改变
       */
      batchInputChange(scope) {
        let item = this.cupor[scope.$index].distributionCount
        if (item < 0) {
          item = 0
        } else {
          let max = this.inputMax(scope)
          if (item > max) {
            item = max
          }
        }
        this.cupor[scope.$index].distributionCount = item
        this.updateAllocated()
      },
      /**
       * 用户分配上一步
       */
      userPreStep() {
        this.close()
        this.$emit('userPreStep')
      },
      /**
       * 关闭
       */
      close() {
        this.$emit('close')
      }
    }
  }

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .btns {
    padding: 20px;
  }

</style>
